import Taro, { Component } from '@tarojs/taro'
import { View, Text, Input } from '@tarojs/components'
import { observer, inject } from '@tarojs/mobx'
import { AtTabBar, AtSearchBar } from 'taro-ui'
// import { ClSearchBar } from 'mp-colorui';
import NewsList from "../../components/news-list/news-list";
import ShopPage from "../../components/shop-page/shop-page";
import UserPage from "../../components/user-page/user-page";
import SearchbarCom from "../../components/searchbar-com/searchbar-com";
import { get, post } from "../../api/fetch"




import './index.scss'


@inject('Store')
@observer

class Index extends Component {
  constructor(props){
    super(props)
    this.state={
      active:0,
    }
    this.handleClick=this.handleClick.bind(this)
  }
  
  componentWillMount () { }

  componentDidMount () {
    let self=this       //应用一旦进入就去获取用户信息
    this.props.Store.getHotwords();
    
    tt.login({
      success(loginRes) {
        tt.getUserInfo({
          success(userRes) {
            self.props.Store.hiddenButton()
            self.props.Store.updateUserInfo(userRes.userInfo)
            let params= {
              ...userRes.userInfo
            };
            post('/userStorage', params).then((res) => {
              // console.log(res)
            })
          },
          fail(userRes) {
            console.log(`getUserInfo 调用失败`);
          }
        });
      },
      fail(loginRes) {
        console.log(`login调用失败`);
      }
    });
    
  }

  componentWillUnmount () {
  }

  componentDidShow () { }

  componentDidHide () { }
  config = {
    navigationBarTitleText:'嗨友购'
  }
  handleClick(index){
    this.setState({
      active:index
    })
  }
  handleSearchClick =()=> {
    Taro.navigateTo({
      url: `/pages/hotsearch/hotsearch`
    })
  }
  handleSearch = (value) =>{
    Taro.navigateTo({
      url: `/pages/hotsearch/hotsearch?keywords=${value}`
    })
  }
  render () {
    let hotwords=Array.from(this.props.Store.hotwords)

    const { active } = this.state;
    let renderPage;
    if(this.state.active==0){
      renderPage=<NewsList />
    }else if(active==1){
      renderPage=<ShopPage />
    }else if(active==2){
      renderPage=<UserPage />
    }
    return (
      <View className='index'>
        { active === 0 && 
          <View className='search'>
            <SearchbarCom
              onClick={this.handleSearchClick}
              value=''
              disabled
              placeholder={'大家都在搜'+hotwords[0]}
            />
          </View>
        }
          <View>
            {renderPage}
            <AtTabBar
              current={this.state.active}
              fixed
              iconSize='24'
              fontSize='12'
              tabList={[
                {title:"首页", iconPrefixClass:'icon', iconType: 'home1', selectedIconType: 'Homehomepagemenu'},
                {title:"商城", iconPrefixClass:'icon', iconType: 'shop1', selectedIconType: 'shop'},
                {title:"我的", iconPrefixClass:'icon',iconType: 'user1', selectedIconType: 'user'}]}
              onClick={this.handleClick}
            >
            </AtTabBar>
          </View>
      </View>
    )
  }
}

export default Index 
